<template>
  <div class="reportWrapper">
    <div class="baseBox depBox">
      <dep-pie></dep-pie>
    </div>
    <div class="baseBox postBox">
      <post-pie></post-pie>
    </div>
    <div class="baseBox depBoxLine">
      <dep-line></dep-line>
    </div>
    <div class="baseBox postBoxLine">
      <post-line></post-line>
    </div>
  </div>
</template>
<script setup>
import DepPie from './echarts/depPie.vue';
import PostPie from './echarts/postPie.vue';
import DepLine from './echarts/depLine.vue';
import PostLine from './echarts/postLine.vue';
</script>

<style scoped lang="less">
.reportWrapper {
  border-radius: 10px;
  background-color: #f7f8fa;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .baseBox {
    width: 49%;
    height: 49%;
  }

  .postBoxLine {
    //width: 50%;
    background-color: #ffffff;
    border-radius: 10px;
  }

  .depBoxLine {
    //width: 50%;

    background-color: #ffffff;
    border-radius: 10px;
  }

  .depBox {
    //width: 50%;

    background-color: #ffffff;
    border-radius: 10px;
  }

  .postBox {
    //width: 50%;
    background-color: #ffffff;
    border-radius: 10px;
  }
}
</style>
